<template>
    <div class="newDescription-content-box">
        <!-- :dialog-style="{ top: '40px' }" -->
         <!-- 技术审评笔记添加描述-->
        <a-modal
            :title="'添加审评描述'"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            width="95%"
            :footer="null"
            :forceRender="forceRender"
            :dialogStyle="{top:'20px'}"
            class="newDescription-modal-v"
        >
            <div class="newDescription-modal-box-v" >
                <div style="flex: 1;" :key="contentKey">
                    <table border bordercolor="#d9d9d9" style="width: 100%;">
                        <tr>
                            <td v-if="wjMlList.length" style="vertical-align: text-top;width: 30%;">
                                <div class="td-top-box"  >
                                    <span class="text" >审评描述</span>
                                    <a-button
                                        class="blue-btn" 
                                        type="primary" icon="save" @click="fmsnrClick(fromSate.fmsnr)" >保存</a-button>
                                </div>
                                <div>
                                    <commpKindeditor
                                        :id="fmsnrId" 
                                        :height="(windowInnerHeight - 310)+'px'" 
                                        width="100%" 
                                        :content.sync="fromSate.fmsnr"
                                        :afterChange="()=>{return fromSate.fmsnr}"
                                        @afterBlur="fmsnrAfterBlur('fmsnr',fromSate.fmsnr)"
                                        :loadStyleMode="false"
                                    ></commpKindeditor>
                                </div>
                            </td>
                            <td style="vertical-align: text-top;width: 160px;">
                                <div class="td-top-box" >
                                    <span class="text" >文件目录</span>
                                    <a-upload style="display: inline-block;" :beforeUpload="$event=>{return false}" :showUploadList="false" action="" @change="singleUploadCahnge">
                                        <a-button
                                        class="blue-btn" 
                                        type="primary" icon="upload" :loading="singleUploadLoading" >上传</a-button>
                                    </a-upload>
                                </div>
                                <div>
                                    <div v-for="(item,index) in wjMlList" :key="index" @click="selectNoteItem({...item,index})">
                                        <div style="display:inline-block" :class="currentXcjcNoteState.index == index ?'select-CheckNotes-box':''">
                                            <span>
                                                {{ item.fwjxsmc+item.fwjlx }}
                                            </span>
                                            <!-- <a-icon type="delete" style="display: inline-block;margin: 0 5px;color: #ed5565;" /> -->
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a-spin tip="正在加载中..." :spinning="cjcNoteSpinning">
                                    <iframe :src="xcjcNoteIframeSrc" width="100%" :height="(windowInnerHeight - 305)+'px'"  v-if="xcjcNoteIframeSrc"></iframe>
                                    <div v-else :style="{height:(windowInnerHeight - 160)+'px'}" >
                                        <a-empty description="暂无文件或文件发生错误！"/>
                                    </div>
                                </a-spin>
                            </td>
                        </tr>
                    </table>
                </div>
                <div>
                    
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
import {
    jcbjaddJcdd,
    jcbjupdateJcdd,
    jcbjupdateMs,
    jcbjuploadDdBjFile,
    jcbjuploadDdmsFile,
    openFileReadOnly,
} from '../service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from '../service/api'
import blobType from '@/common/blobType'
import commpKindeditor from '@/components/commp-kindeditor/commpKindeditor.vue'
import YchConstant from "@/api/YchConstant";
export default {
    components:{
        commpVxeTable,
        commpKindeditor,
    },
    props:{

    },
    data(){
        return{
            currentData:{},
            visible:false,
            chapterList:[],
            headList:[],
            spinning:false,
            spinningKey:null,
            dataTableKey:null,
            selectId:[],
            editvisible:false,
            selectData:{},
            isVisible:true,
            fromSate:{},
            commpKindeditorKey:null,
            newDescriptionKey:null,
            forceRender:true,
            windowInnerHeight:window.innerHeight,
            fmsnrId:'fmsnrId'+Date.now(),
            wjMlList:[],
            singleUploadLoading:false,
            xcjcNoteIframeSrc:'',   
            cjcNoteSpinning:false, 
            currentXcjcNoteState:{},
            contentKey:null,
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.contentKey = Date.now()
            this.fromSate = val
            this.wjMlList = []
            this.xcjcNoteIframeSrc = ''
        },
        singleUploadCahnge({file}){
            const fileData = new FormData();
            fileData.append("file",file);
            fileData.append("id",this.fromSate.id);
            if(this.fromSate.msid){
                fileData.append("msid",this.fromSate.msid);
                jcbjuploadDdmsFile(fileData).then(res=>{
                    //console.log('上传了',res.result)
                    if(res.code == 200){
                        this.fromSate = {
                            ...this.fromSate,
                            ...res.result
                        } 
                        let data = {
                            fwjxsmc:res.result.fwjxsmc,
                            id:res.result.wjid,
                            fwjlx:res.result.fwjlx
                            
                        }
                        this.wjMlList.push(data)
                        this.selectNoteItem({...data,index:this.wjMlList.length-1})
                    }else{
                        this.$message.warning(res.message)
                    }
                })
                
                
            }else{
                jcbjuploadDdBjFile(fileData).then(res=>{
                    //console.log('上传了',res)
                    if(res.code == 200){
                        this.fromSate = {
                            ...this.fromSate,
                            ...res.result
                        }
                        let data = {
                            fwjxsmc:res.result.fwjxsmc,
                            id:res.result.wjid,
                            fwjlx:res.result.fwjlx
                        }
                        this.wjMlList.push(data)
                        this.selectNoteItem({...data,index:this.wjMlList.length-1})
                        this.contentKey = Date.now()
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
            
            
        },
        selectNoteItem(item){
            this.xcjcNoteIframeSrc = ''
            this.cjcNoteSpinning = true
            if(item.id){
                this.currentXcjcNoteState = item
                this.xcjcNoteIframeSrc = ''
                this.cjcNoteSpinning = true
                if(item.fwjlx == '.doc' || item.fwjlx == '.docx'){
                    openFileReadOnly({id:item.id}).then(res=>{
                        if(res.code == 200){
                            this.xcjcNoteIframeSrc = res.result.wordUrl
                        }else{
                            this.xcjcNoteIframeSrc = ''
                        }
                    })
                    this.cjcNoteSpinning = false
                }else{
                    this.xcjcNoteIframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI + YchConstant.SPZX_SPCY + '/spcyRsWjmb/openWjjl?id='+item.id
                    this.cjcNoteSpinning = false
                }
            }else{
                this.cjcNoteSpinning = false
            }
        },
        fmsnrAfterBlur(){

        },
        fmsnrClick(val){
            let data = {
                fmsnr:val,
                id:this.fromSate.msid
            }
            jcbjupdateMs(data).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.$emit('addPlaceSuccessChange',this.fromSate)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        handleOk(){
            if(!this.fromSate.fddmc){
                this.$message.warning('请输入审评地点')
                return
            }
            if(this.fromSate.id){
                jcbjupdateJcdd(this.fromSate).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.$emit('addPlaceSuccessChange',this.fromSate)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                jcbjaddJcdd(this.fromSate).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.$emit('addPlaceSuccessChange',this.fromSate)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
            
        },
        
    }
}
</script>
<style lang="less">
.newDescription-modal-v{
    .ant-modal-body{
        padding:8px;
    }
}
// .newDescription-content-box{
    .extractsi-top-box{
        margin-top: 10px;
        display: flex;
        align-items: center;
        background-image: linear-gradient(to bottom, #e7f3ff, #fff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff);
        background-size: 100% 100% !important;
        padding:8px;
        border:1px solid #d9d9d9;
        .situation-left-title{
            display: inline-block;
            background-color: #e6f7ff;
            text-align: left;
            font-weight: 600;
            font-size: 16px;
            font-family: simHei;
            color: rgba(0, 0, 0, 0.85);
            margin-right: 8px;
        }
    }
    .newDescription-modal-box-v{
        display: flex;
        td{
            padding: 5px;
        }
        .title-left-v{
            text-align: center;
            width: 117px;
            font-weight: 600;
            font-size: 16px;
            background-color:#e6f7ff;
            font-family: simHei;
            color: rgba(0, 0, 0, 0.85);
        }
        .td-top-box{
            display: flex;
            .text{
                flex: 1;
                font-size: 16px;
                font-weight: 600;
            }
        }
        .select-CheckNotes-box{
            background-image: linear-gradient(to bottom, #e7f3ff, #fff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff);
            background-size: 100% 100% !important;
            // color:#fff;
            padding:5px 10px;
            border-radius:15px;
            border:3px solid #faad14;
        }
    }
// }


</style>